<template>  <!--主页组件-->
     <div>
        <div class="app-head">
           <div class="app-head-inner">
             <router-link  :to="{path:'/'}">  <!--跳到首页-->
                 <img src="../assets/logo.png" >
             </router-link>
             <div class="head-nav">
               <ul class="nav-list">
                 <li>{{ username }}</li>
                 <li v-if="username!==''" class="nav-pile">|</li>
                 <li v-if="username!==''" @click="qingkong">退出</li>
                 <li v-if="username === ''" @click="logClick">登录</li>
                 <li class="nav-pile">|</li>
                 <li v-if="username === ''" @click="regClick">注册</li>
                 <li v-if="username === ''" class="nav-pile">|</li>
                 <li @click="aboutClick">关于</li>
               </ul>
             </div>
           </div>
        </div>
        <div class="app-content">
          <keep-alive>
           <router-view></router-view>
          </keep-alive>
        </div>
       
        <div class="app-foot">
          <p>© 2017 fishenal MIT</p>
        </div>
        <My-dialog :is-show="isShowAboutDialog" @on-close="closeDialog('isShowAboutDialog')">
          <p class="aboutContent">定位2017年7月31日20:04:01，GitHub地址:<a href="https://github.com/yzw7489757" target="_blank">https://github.com/yzw7489757</a>
          blog:<a href="http://www.cnblogs.com/yuanziwen/">http://www.cnblogs.com/yuanziwen/</a></p>
        </My-dialog>


        <My-dialog :is-show="isShowLogDialog" @on-close="closeDialog('isShowLogDialog')">
        <log-form @has-log="onSuccessLog"></log-form><!--登陆-->
        </My-dialog>


        <My-dialog :is-show="isShowRegDialog" @on-close="closeDialog('isShowRegDialog')">
        <reg-form @has-reg="onSuccessReg"></reg-form><!--注册-->
        </My-dialog>
     </div>
</template>

<script>
import Dialog from './dialog'
import logForm from './logForm'
import regForm from './regForm'
export default {
  components:{
     MyDialog:Dialog,
     logForm:logForm,
     regForm:regForm
  },
  data(){
    return {
           isShowAboutDialog: false,
           isShowLogDialog : false,
           isShowRegDialog : false,
           username: ''
    }
  },methods:{
    aboutClick () {
      this.isShowAboutDialog = true
    },
    logClick () {
      this.isShowLogDialog = true
    },
    regClick () {
      this.isShowRegDialog = true
    },
    closeDialog (attr) {
      this[attr] = false
    },
    onSuccessLog (data) {
      console.log(data)
      this.closeDialog('isShowLogDialog')
      this.username = data.username
    },
    qingkong () {
      this.username = ''
    },
    onSuccessReg () {
     this.closeDialog('isShowRegDialog')
     alert('未将数据发送给后台，请使用标准的任意账号默认登录')
    }
  }
}
</script>

<style lang="css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
a{
  color:inherit;
  text-decoration:none;
}

body{
  background: #f0f2f5;
  font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB",
  "Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei",
  "WenQuanYi Micro Hei",sans-serif;
  font-size:14px;
  color:#444;
}
.app-head{
  background:#363636;
  color:#b2b2b2;
  height:90px;
  line-height:90px;
  width:100%;
}

.app-head-inner{
  width:1200px;
  margin: 0 auto;
}

.head-logo{
  float:left;
}
.app-head-inner img{
  width:50px;
  margin-top:20px;
}

.head-nav{
  float:right;
}

.head-nav ul{
    overflow:hidden;
}

.head-nav li{
  cursor:pointer;
  float:left;
}

.nav-pile {
  padding: 0 10px;
}

.app-foot{
  text-align:center;
  height:80px;
  width:100%;
  line-height:80px;
  background:#e3e4e8;
  clear:both;
  margin-top:30px;
}

.container{
  width:1200px;
  margin:0 auto;
}

.aboutContent a{
  text-decoration:underline;
}

.button{
  background:#4fc08d;
  color:#fff;
  display:inline-block;
  padding:10px 20px;
  cursor:pointer;
}

.button:hover{
  background:#4fc08d;
}

.g-form{

}

.g-form-line{
  padding: 15px 0;
}

.g-form-label {
  width:100px;
  font-size:16px;
  display: inline-block;
}

.g-form-input{
  display: inline-block;
}

.g-form-input input{
  height:30px;
  width:200px;
  line-height:30px;
  vertical-align: middle;
  padding: 0 10px;
  border: 1px solid #ccc;
}

.g-form-btn{
  padding-left:100px;
}

.g-form-error{
  color:red;
  padding-left:15px;
  font-size:12px;
}

.logTitle{
  /*border:2px solid #4fc08d;*/
  color:red;
  display: inline-block;
  padding: 10px 15px;
  position:absolute;
  top:65%;
  left:30%;
}


</style>
